<template>
	<div>
		<!--table表格-->
		<div class="topFanhui">
			<a-button @click="goBack"> 
				<template #icon><LeftOutlined /></template>返回
			</a-button>
			<a-button type="primary" @click="addAdverst">
				<template #icon><PlusOutlined /></template>添加广告
			</a-button>
		</div>
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>广告名称</th>
					<th>图片</th>
					<th>是否展示</th>
					<th>链接地址</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in dataList" :key="index">
					<td>{{item.name}}</td>
					<td>
						<span class="pictures">
							<img :src="item.img_url" alt="图片未加载">
						</span>
					</td>
					<td>
						{{item.show == 1 ? "是" : "否"}}
					</td>
					<td>{{item.url}}</td>
					<td>
						<a-button type="primary" danger size="small" @click="deleteGug(item,index)">删除</a-button>
						<a-button type="primary" size="small" @click="xiugaiGua(item,index)" style="margin: 0 5px">修改</a-button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	import systemApi from '../../../api/system.js';
	import {
		Modal
	} from 'ant-design-vue';
	import storages from '../../../storage/index.js'
	
	export default {
		data() {
			return {
				dataList: '',
				
				checked: false,
				ID: this.$route.query.id,
			}
		},
		mounted() {
			this.getAddverData();
		},
		methods: {
			clickPage() {
				console.log('444');
			},
			/*获取广告数据*/
			getAddverData() {
				systemApi.getAdList(this.ID).then(res => {
					if(res.status == 1){
						this.dataList = res.result
					}
				})
			},
			/*点击添加广告*/
			addAdverst() {
				this.$router.push({
					path: '/system/addAmendList',
					query: {
						ids: this.ID
					}
				})
			},
			/*修改广告*/
			xiugaiGua(item, index) {
				console.log(item);
				this.$router.push({
					path: '/system/addAmendList',
					query: {
						changeId: item.id
					}
				})
			},
			deleteGug(item, index) {
				let that = this
				Modal.confirm({
					title: () => '确定删除吗?',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						systemApi.delAd({
							ad_id: item.ad_id,
							id: item.id
						}).then((res) => {
							that.$message.success("您已删除");
							that.getAddverData();
						})
					},
				})
			},
			/*返回*/
			goBack() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style scoped>
	.topFanhui {
		display: flex;
		justify-content: space-between;
		margin-bottom: 6px;
	}

	.pictures {
		display: inline-block;
		width: 55px;
		height: 47px;
		border-radius: 3px;
	}

	.pictures img {
		width: 100%;
		height: 100%;
		border-radius: 3px;
	}
</style>